<div id="envContainer" class="verticalContainer">

  <div>
    
    <h1 id="abetitle" click-toggle="#envContainer@class=hamburger">ProjectABE - 0.8.10</h1>
    <a id="getNative" click-call="embed" data-url="https://github.com/felipemanga/ProjectABE/releases/latest" true-hide="ram.isNativeBuild" >Get ProjectABE stand-alone!</a>

    <div id="main">
      <div id="leftBar" data-state="embed">
	<h2>Sources</h2>
	<ul class="reponav" data-src="app.repoList">
	  <li data-key="{{key}}" data-url="{{value}}" click-call="changeRepo" click-set="#main@class=repo">{{key}}</li>
	</ul>
	<h2>Links</h2>
	<ul class="linknav">
	  <li click-call="embed" data-url="https://community.arduboy.com">Community</li>
	  <li click-call="embed" data-url="https://mlxxxp.github.io/documents/Arduino/libraries/Arduboy2/Doxygen/html/index.html">Arduboy2</li>
	  <li click-call="embed" data-url="https://cdn-shop.adafruit.com/datasheets/atmel-7766-8-bit-avr-atmega16u4-32u4_datasheet.pdf">32u4 Datasheet</li>
	</ul>
	<h2 undefined-hide="ram.debuggerEnabled" >My Projects</h2>
	<a class="newProject" undefined-hide="ram.debuggerEnabled" href="?url=new">New Game</a>
	<ul class="projectsnav" data-src="app.projList">
	  <li click-call="play" data-title="{{value.title}}" data-url="null" data-lsp="{{value.localSourcePath}}">{{value.title}}</li>
	</ul>
      </div>
      <div id="embed"></div>
      <div id="content">
	<h2 undefined-hide="ram.repo.repository">{{ram.repo.repository}}</h2>
	<h3 undefined-hide="ram.repo.maintainer">maintained by {{ram.repo.maintainer}}</h3>
	<ul class="market" data-src="ram.repo.items">
	  <li data-key="{{key}}" style="background-image: url({{value.screenshots.0.filename}})" click-call="preview" click-set="#rightbar@class=visible">
	    <span class="gameName" data-name="{{value.title}}"></span>
	  </li>
	</ul>
      </div>
      <div id="rightBar" click-set="class=" undefined-hide="ram.preview">
	<div id="preview">
	  <ul class="images" data-src="ram.preview.screenshots">
	    <li><img src="{{value.filename}}"></li>
	  </ul>
	  <h2>{{ram.preview.title}}</h2>
	  <ul class="info">
	    <li undefined-hide="ram.preview.genre" class="genre">Genre: {{ram.preview.genre}}</li>  
	    <li class="item author">Author: {{ram.preview.author}}</li>
	  </ul>
	  <p>{{ram.preview.description}}</p>

	  <div class="actions">
	    <div click-call="embed" data-url="{{ram.preview.sourceUrl}}" class="item source">Source</div>
	    <div class="item play" click-call="play" title="Play in the browser!">Emulator</div>
	    <div class="item upload" click-call="upload" title="Upload this game to your arduboy!">Transfer</div>
	  </div>
	      
	</div>
      </div>
  </div>

</div>
